<template>
  <section class="introduction" ref="introduction">
    <div class="left">
      <div class="content" ref="introductionFirst">
        <a class="cv" href="static/pdf/UI-1年-袁婷婷.pdf" target="_blank">个人简历>></a>
        <div class="content-2 content-margin">因为设计</div>
        <div class="content-2">所以我存在</div>
        <div class="content-3">一个设计者最需要的就是好的Taste，Taste会决定Style。Taste是一种能力，而不是格调。随着经验的积累，发现对“美”的认知是在变化的。很多美是被人们共同认可的美，找出这些被公认的美之间的共性，就能够做出受人喜爱的设计。</div>
      </div>
      <div class="content-second" ref="introductionSecond">
        <div class="content-1">关于我的设计技能</div>
        <div class="content-2">参与过原型设计，熟练掌握Axure、Ps、Ai、Sketch、Xmind等设计和原型制作工具；用ae制作过动效和视频。熟悉google、Apple、Microsoft、facebook、蚂蚁金服等著名公司设计规范。有前端知识储备，能出原型，出UI，出设计规范。</div>
        <div class="content-1">持之以恒地热爱、学习</div>
        <div class="content-2">有手绘功底，熟练掌握多种界面风格。逻辑清晰，有较高的审美。关注生活和互联网行业的流行趋势。</div>
      </div>
    </div>
    <div class="right">
      <img v-if="defaultFlag" src="static/image/introduction/right.jpg" alt="">
      <img v-if="!defaultFlag" src="static/image/introduction/bottom.jpg" alt="">
    </div>
    <div class="left-down" @click="leftDownClick" v-if="defaultFlag">
      <img class="left-down-1" src="static/image/introduction/down.png" alt="">
      <img class="left-down-2" src="static/image/introduction/left-down.png" alt="">
    </div>
    <div :class="defaultFlag ? 'bottom' : 'bottom bottom-move'" ref="bottomdiv">
      <img v-show="defaultFlag" ref="bottomImg" src="static/image/introduction/bottom.jpg" ondragstart="return false;" w-resize alt="">
    </div>
  </section>
</template>
<script>
export default {
  data () {
      return {
        defaultFlag: true,
        downY: '',
        upY: '',
        num: ''
      }
  },
  mounted() {
    document.addEventListener('DOMMouseScroll', this.scrollFunc, false);
    window.onmousewheel = document.onmousewheel = this.scrollFunc;
    this.addClass(this.$refs.introductionFirst, 'opacity-1');
    this.removeClass(this.$refs.introductionSecond, 'opacity-1');
    this.$refs.bottomImg.addEventListener('mousedown', this.mousedown);
    this.$refs.bottomImg.addEventListener('mouseup', this.mouseup);
  },
  methods: {
    hasClass (elements, cName) {
      return !!elements.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)'))
    },
    addClass (elements, cName) {
      if (!this.hasClass(elements, cName)) {
        elements.className += ' ' + cName
      };
    },
    removeClass (elements, cName) {
      if (this.hasClass(elements, cName)) {
        elements.className = elements.className.replace(new RegExp('(\\s|^)' + cName + '(\\s|$)'), ' ')
      };
    },
    // 鼠标按下事件
    mousedown(event) {
      this.downY = event.screenX;
    },
    // 鼠标放开事件
    mouseup(event) {
      this.upY = event.screenX;
      if (this.downY === this.upY) return;
      let flag = this.downY !== this.upY && this.downY < this.upY;
      if (flag) {
        this.changePage();
      }    
    },
    // 切换页面逻辑
    changePage() {
      if (!this.num) {
        this.num = 1;
        this.addClass(this.$refs.bottomdiv, 'bottom-move');
        setTimeout(() => {
          this.defaultFlag = !this.defaultFlag;
          this.num = '';
        }, 500);
      }
    },
    changePageBack() {
      this.defaultFlag = !this.defaultFlag;
      this.removeClass(this.$refs.bottomdiv, 'bottom-move');
    },
    // 左下图标点击事件
    leftDownClick() {
      this.changePage();
    },
    // 鼠标滚轮滚动事件
    scrollFunc(e) {
      e = e || window.event;
      if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
          if (e.wheelDelta > 0) { //当滑轮向上滚动时
            if (this.defaultFlag) return;
            this.changePageBack();
          }
          if (e.wheelDelta < 0) { //当滑轮向下滚动时
            if (!this.defaultFlag) return;
            this.changePage();
          }
      } else if (e.detail) {  //Firefox滑轮事件
          if (e.detail > 0) { //当滑轮向上滚动时
            if (this.defaultFlag) return;
            this.changePageBack();
          }
          if (e.detail < 0) { //当滑轮向下滚动时
            if (!this.defaultFlag) return;
            this.changePage();
          }
      }
    },
    // 函数防抖
    debounce(fn, wait = 300) {
      let timer = null
      return function () {
        const context = this
        const args = arguments
        if (timer) {
          clearTimeout(timer)
          timer = null
        }
        timer = setTimeout(function () {
          fn.apply(context, args)
        }, wait)
      }
    }
  },
  watch: {
    defaultFlag(val, oldVal) {
      if (val) {
        this.addClass(this.$refs.introductionFirst, 'opacity-1');
        this.removeClass(this.$refs.introductionSecond, 'opacity-1');
      } else {
        this.removeClass(this.$refs.introductionFirst, 'opacity-1');
        this.addClass(this.$refs.introductionSecond, 'opacity-1');
      }
    }
  },
  beforeDestroy() {
    this.$refs.bottomImg.removeEventListener('mousedown', this.mousedown);
    this.$refs.bottomImg.removeEventListener('mouseup', this.mouseup);
    document.removeEventListener('DOMMouseScroll', this.scrollFunc, false);
    window.onmousewheel = document.onmousewheel = '';
  }
}
</script>
<style lang='less' scoped>
  .introduction {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    .left {
      width: 40%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .content {
        width: 70%;
        opacity: 0;
        position: absolute;
        /* Safari and Chrome */
        -webkit-transition: all 1s ease-in-out;
        /* Firefox 4 */
        -moz-transition: all 1s ease-in-out;
        /* Opera */
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        .content-1 {
          font-size: 2.8rem;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(51,51,51,1);
        }
        .cv{
          font-size: 2.8rem;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(51,51,51,1);
          text-decoration:underline;
        }
        .cv:hover{
          color: #2797ff;
        }
        .content-margin {
           margin-top: 1rem;
        }
        .content-2 {
          font-size: 4.8rem;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(51,51,51,1);
        }
        .content-3 {
          padding-right: 25%;
          margin-top: 2rem;
          font-size: 1.8rem;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(102,102,102,1);
        }
      }
      .content-second {
        width: 70%;
        opacity: 0;
        position: absolute;
        /* Safari and Chrome */
        -webkit-transition: all 1s ease-in-out;
        /* Firefox 4 */
        -moz-transition: all 1s ease-in-out;
        /* Opera */
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        .content-1 {
          font-size: 2.8rem;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          color: rgba(51,51,51,1);
        }
        .content-2 {
          margin: 1.5rem 0;
          font-size: 1.8rem;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(102,102,102,1);
        }
      }
    }
    .right {
      width: 60%;
      height: 100%;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .left-down {
      position: absolute;
      left: 6%;
      bottom: 5%;
      z-index: 2;
      cursor: pointer;
      .left-down-1 {
        width: 2rem;
      }
      .left-down-2 {
        width: 10rem;
        position: relative;
        top: -.2rem;
      }
    }
    .bottom {
      /* Safari and Chrome */
      -webkit-transition: all .5s ease-in-out;
      /* Firefox 4 */
      -moz-transition: all .5s ease-in-out;
      /* Opera */
      -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
      position: absolute;
      bottom: -20%;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        /* Safari and Chrome */
        -webkit-transition: all .5s ease-in-out;
        /* Firefox 4 */
        -moz-transition: all .5s ease-in-out;
        /* Opera */
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        cursor: n-resize;
        width: 30%;
      }
    }
    .bottom-move {
      bottom: 12.5%;
      left: 18%;
      img {
        width: 50%;
      }
    }
  }
</style>
